<template>
  <div class="CeremonyHall  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="火化日期:">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentDateStart"
                            format="yyyy-MM-dd"  :picker-options="pickerOptions"></el-date-picker>
            -
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.appointmentDateEnd"
                            format="yyyy-MM-dd"  :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item label="逝者姓名:" prop="deadName">
            <el-input v-model="ruleForm.deadName" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item label="证件号码:" prop="certificateNo">
            <el-input v-model="ruleForm.certificateNo" clearable></el-input>
          </el-form-item>  -->
          <el-form-item label="安放状态" prop="statusType">
            <el-cascader :options="options" :show-all-levels="false" @change="onChange" v-model="ruleForm.statusType"></el-cascader>
          </el-form-item>

<!--          <el-form-item label="追查状态" prop="expired">-->
<!--            <el-select-->
<!--              v-model="ruleForm.expired"-->
<!--              clearable-->
<!--              filterable-->
<!--              placeholder="请选择追查状态"-->
<!--              class="w150"-->
<!--            >-->
<!--              <el-option label="全部" value=""></el-option>-->
<!--              <el-option-->
<!--                v-for="item in trackType"-->
<!--                :key="item.id"-->
<!--                :label="item.label"-->
<!--                :value="item.id"-->
<!--                :disabled="item.disableState"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->

           <el-form-item label="区域:" prop="areaCode">
            <el-select
              v-model="ruleForm.areaCode"
              onkeydown="return (event.keyCode!=8)"
              placeholder="请选择"
            >
              <el-option label="全部" value></el-option>
              <el-option
                v-for="item in areaDictionary"
                :key="item.id"
                :label="item.areaName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="btnRight.btnBuryingRecordExport" @click="onSubmit('search')">
              查询
            </el-button>
            <el-button icon="el-icon-refresh" v-if="btnRight.btnBuryingRecordReset" @click="resetQuery">重置</el-button>
            <el-button type="primary" plain v-if="btnRight.btnBuryingRecordSearch" @click="openExecl">
              导出Excel
            </el-button>
          </el-form-item>
        </el-row>
        <el-table
          id='out-table'
          :data="tableData"
          border
          v-loading="tableLoading"
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          :row-style='rowStyle'
          :height="tableHeight">
          <el-table-column sortable align='center' prop="businessCode" label="业务编码" width="200">
          </el-table-column>
          <el-table-column
            prop="deadName"
            align='center'
            label="逝者姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="appointmentDate"
            align='center'
            label="火化日期"
            width="150">
          </el-table-column>
          <!-- <el-table-column
            prop="arrivedTime"
            align='center'
            label="到馆时间"
            width="200">
          </el-table-column> -->

          <!-- <el-table-column
            prop="deadGender"
            align='center'
            label="逝者性别"
            width="120">
          </el-table-column>
          <el-table-column
            prop="deadAge"
            align='center'
            label="年龄"
            width="100">
          </el-table-column>
          <el-table-column
            prop="certificateType"
            align='center'
            label="逝者证件类型"
            width="150">
          </el-table-column>
          <el-table-column
            prop="certificateNo"
            align='center'
            label="逝者证件号码"
            width="200">
          </el-table-column>-->
          <el-table-column
            prop="householdRegistrationPlace"
            align='center'
            label="户口所在地"
            width="280">
          </el-table-column>
          <!-- <el-table-column
            prop="beforeDeathAddress"
            align='center'
            label="生前地址"
            width="150">
          </el-table-column> -->
          <el-table-column
            prop="deathDate"
            align='center'
            label="死亡时间"
            width="150">
          </el-table-column>
          <!-- <el-table-column
            prop="deathCause"
            align='center'
            label="死亡原因"
            width="150">
          </el-table-column> -->
          <!-- <el-table-column
            align='center'
            label="经办人"
            width="100">
            <template slot-scope="scope">
              {{ scope.row.familyName === null ? '无':scope.row.familyName }}
            </template>
          </el-table-column>
          <el-table-column
            align='center'
            label="经办人联系电话"
            width="200">
            <template slot-scope="scope">
              {{ scope.row.familyPhone === null ? '无':scope.row.familyPhone }}
            </template>
          </el-table-column> -->
          <el-table-column
            prop="organizationName"
            align='center'
            label="组织机构"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            label="存放位置"
            width="105">
            <template slot-scope="scope">
              {{ scope.row.businessNype === null ? '无':scope.row.businessNype }}
            </template>
          </el-table-column>
          <el-table-column
            prop="inScope"
            align="center"
            label="是否范围内安放"
            width="80">
          </el-table-column>
          <!-- <el-table-column prop="images" align='center' label="图片"  width="150">
            <template slot-scope="scope">
               <el-image
                v-if="scope.row.images"
                style="width: 100px; height: 70px"
                :src="scope.row.images[0]"
                :preview-src-list="scope.row.images">
              </el-image>
              <el-image
                v-else
                style="width: 100px; height: 70px"
                :src="require('../../../static/images/noImg.png')"
                >
              </el-image>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="isBuried"
            align="center"
            label="疑似土葬"
            width="60">
          </el-table-column>
          <el-table-column
            prop="expried"
            align="center"
            label="是否追查"
            width="60">
            <template slot-scope="scope">
              {{ scope.row.expried === 0 ? '是':'否'}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="250">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="small">流向查看</el-button>
              <el-button @click="showQRCode(scope.row)" type="primary" size="small">逝者二维码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div style="text-align: center;
                    height: 0px;
                    line-height: 20px;
                    font-size: 18px;">
          显示{{ pager.total === 0 ? 0 : (Math.ceil(pager.total / pager.pageSize) > 1 ? ((pager.currentPage - 1) * pager.pageSize + 1) : (1)) }}到{{ pager.total === 0 ? 0 : ((Math.ceil(pager.total / pager.pageSize) === pager.currentPage) ? (pager.total) : (pager.currentPage * pager.pageSize)) }}条
        </div> -->
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>
    </div>
    <!-- /dead/QRCode/download -->
    <el-dialog
      title="逝者二维码查看"
      :visible.sync="QRCodeDialogVisible"
      width="30%"
      center>
      <div class="box">
        <el-image :src="QRCodeSrc" class="code_img">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <el-button @click="downLoadQRCodePic" class="nowBtn">立即下载</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="骨灰流向"
      v-dialogDrag
      :visible.sync="dialogVisible"
      class="dialog"
      width="30%"
      >
      <el-timeline :reverse="true">
          <el-timeline-item v-for="(item,index) in timelines" :key='index' :timestamp="item.gmtCreate" placement="top" >
            <el-card class="el_card_item">
              <h4><div class="item_label">承办人：</div>{{!item.familyName?'无':item.familyName}}</h4>
              <h4><div class="item_label">电话：</div>{{!item.familyPhone?"无":item.familyPhone}}</h4>
              <h4 style="color:#00F"><div class="item_label">业务类型：</div>{{item.workType}}</h4>
              <h4><div class="item_label">逝者姓名：</div>{{item.deadName}}</h4>
              <h4><div class="item_label">业务机构：</div>{{item.orgName}}</h4>
              <h4>图片：</h4>
              <div class="imgs_box" v-if="item.images&&item.images.length>0">
                <el-image
                v-for="(img,index) in item.images"
                :key='index'
                style="width: 100px; height: 70px"
                :src="img"
                :preview-src-list="item.images">
              </el-image>
            </div>
            <el-image
              v-else
              style="width: 100px; height: 70px"
              :src="require('../../../static/images/noImg.png')"
              >
            </el-image>

            </el-card>
          </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {dataFormatetmd} from '@/utils/index'
import * as Type from '@/api/service'
import * as API from '@/api/civilAffairsBureau/index'
import download from "@/api/download"
import {provinceCityCounty} from "@/utils/provinceCityCounty";
export default {
  name: "CremationRecord",
  data() {
    return {
      QRCodeSrc:"",
      QRCodeDialogVisible:false,
      dialogVisible:false,
      loading: false,
      tableLoading:false,
      timelines: [],
      type: [],
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
      },
      // putType:[
      //   {id:'place',label:"已安放"},
      //   {id:'unPlace',label:"未安放"},
      //   {id:'timePlace',label:"疑似土葬"},
      // ],

      options:
        [{
        value: '',
        label: '全部'
        },{
          value: 'place',
          label: '已安放'
      },{
          value: 'unPlace',
          label: '未安放'
        },{
          value: 'timePlace',
          label: '疑似土葬',
          children: [{
            value: 'timePlace',
            label: '全部'
          },{
            value: 'timePlace_isPursue',
            label: '已追查'
          },{
            value: 'timePlace_isNotPursue',
            label: '未追查'
          }]
        }
      ],

      // trackType:[
      //   {id:'isPursue',label:"已追查"},
      //   {id:'noPursue',label:"未追查"},
      // ],
      ruleForm: {
        "appointmentDateStart": "",
        "appointmentDateEnd": "",
        "deadName": "",
        "certificateNo": "",
        "statusType": "",
        "expired": "",
        "cremationTypeCode": "",
        "areaCode": "",
        "pageSize": 0,
        "currentPage": 0,
        "exportExcelFlag": 0
      },
      pager: {
        "pageSize": 20,
        "total": 1,
        "currentPage": 1
      },
      tableData: [],
      dictionary: {},
      areaDictionary: [],
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnBuryingRecordExport: true, //查询
        btnBuryingRecordReset:false,//
        btnBuryingRecordSearch: true,//导出excel
      }
    }
  },//载入按钮
  created(){
    //获取当前用户权限区域
    this.getArea()
  },
  mounted() {
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] = (this.btnRight[key] || this.btnRight[key] == "true") ? true : false;
    }

    // this.areaDictionary = provinceCityCounty
    //   .find((item) => item.label === "山东省")
    //   .children.find((item) => item.label === "临沂市").children;


    this.$store.dispatch('user/getdictionary').then((res) => {     //获取字典数据
      this.dictionary = res;
      this.$set(this.dictionary, res)
    }).catch(() => console.log('promise catch err'))
    this.defaultValue();
    this.onSubmit()
    var that = this
    window.onresize = function () {
      var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
      that.tableHeight = dom - search - 190
    }
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  },
  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
      var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
      this.tableHeight = dom - search - 190
    })
  },
  methods: {
    downLoadQRCodePic(){
      window.open(this.QRCodeSrc);


    },
    showQRCode(row){
      this.QRCodeSrc=ROOT+"/dead/QRCode/download?businessCode="+row.businessCode;
      this.QRCodeDialogVisible=true;
    },
    async handleClick(row){
      let data={
        businessCode:row.businessCode,
        deadName:row.deadName
      }
      const res= await API.getAshesWhereabouts(data)
      if(res.code===1){
        this.timelines=res.data
      }else{
        this.$message.error(res.message)
      }

      this.dialogVisible=true
    },
    //
    rowStyle({row}){
      let style={}
      if(row.boundaryTyep==='unWider'){
        style={
          background:'#F3F3F3'
        }
      }else if(row.boundaryTyep==='wider'){
        style={
          background:'#999'
        }
      }else{

      }
      return style
    },
    //获取当前用户权限区域
    async getArea(){
      const res = await API.findRegionSelect()

      if(res.code==1){
        this.areaDictionary=res.data.systemAreaItems
      }else{
        this.$message.error('数据读取失败');
      }
    },
    //默认初始值方法
    defaultValue() {
      //默认查询开始结束时间为当天
      this.ruleForm.appointmentDateStart = dataFormatetmd(new Date());
      this.ruleForm.appointmentDateEnd = dataFormatetmd(new Date());
    },
    onChange(arr){
      let end = arr.slice(-1);
      this.ruleForm.statusType=end.toString();
      console.log(this.ruleForm.statusType)
      return;
    },

    onSubmit(value) {
      this.loading = true
      if (value) {
        this.pager.currentPage = 1;
      }
      var postData = {
        "appointmentDateStart": dataFormatetmd(new Date(this.ruleForm.appointmentDateStart)),
        "appointmentDateEnd": dataFormatetmd(new Date(this.ruleForm.appointmentDateEnd)),
        "deadName": this.ruleForm.deadName,
        "certificateNo": this.ruleForm.certificateNo,
        "statusType": this.ruleForm.statusType,
        "expired": this.ruleForm.expired,
        "cremationTypeCode": this.ruleForm.cremationTypeCode,
        "areaCode": this.ruleForm.areaCode,
        "pageSize": this.pager.pageSize,
        "currentPage": this.pager.currentPage,
        "exportExcelFlag": 0,            //表示显示 1表示导出execl
        "orderField	": "",     //排序字段
        "orderType": "",        //排序顺序
        "cremationOrBuryType":"bury"
      }
      //查询接口
      Type['loadCremationRecord'](postData).then(response => {
        const {data} = response;
        if (!data) {
          this.loading = false;
          this.$message('数据读取失败')
          return
        }
        this.tableData = data.list
        this.pager = data.pager
        this.loading = false
        //   //数据读取成功
      }).catch(error => {
        this.$message(error)
        this.loading = false
        this.tableData = []
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ruleForm.appointmentDateStart = "";
      this.ruleForm.appointmentDateEnd = "";
      this.$refs["ruleForm"].resetFields();
      this.onSubmit();
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
      this.pager.pageSize = size;
      this.onSubmit()
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit()  //点击第几页
    },
    openExecl() {
      // window.location.href = "excel地址"
      if(this.tableData.length===0){
        this.$message({
          message:"暂无数据可导出",
          type:'warning'
        })
        return false
      }
      this.tableLoading=true
      var postData = {
        "appointmentDateStart": dataFormatetmd(new Date(this.ruleForm.appointmentDateStart)),
        "appointmentDateEnd": dataFormatetmd(new Date(this.ruleForm.appointmentDateEnd)),
        "deadName": this.ruleForm.deadName,
        "certificateNo": this.ruleForm.certificateNo,
        "statusType": this.ruleForm.statusType,
        "cremationTypeCode": this.ruleForm.cremationTypeCode,
        "areaCode": this.ruleForm.areaCode,
        "pageSize": this.pager.pageSize,
        "currentPage": this.pager.currentPage,
        "exportExcelFlag": 1,            //0表示显示 1表示导出execl
        "orderField	": "",     //排序字段
        "orderType": "",
        "cremationOrBuryType":"bury"       //排序顺序
      }
      // 查询安葬记录的接口
      download.exportExcel(Type["CremationRecordEXPEXC"], postData, "安葬台账_" + download.getDateTime() + ".xlsx").then(res=>{

        if(res==='成功'){
          this.tableLoading=false
        }else{
          this.tableLoading=false
          this.$message.error("导出失败")
        }
      }).catch(err=>{

        this.tableLoading=false
          this.$message.error("导出失败")
      })
      //this.tableLoading=false
    },
    // openExecl() {
    //   // window.location.href = "excel地址"
    //  /* generate workbook object from table */
    //         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
    //         /* get binary string as output */
    //         var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    //         try {
    //             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `寄存基本信息.xlsx`)
    //         } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    //         return wbout
    // },
  }
}
</script>

<style scoped>
.box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.w150 {
  width: 150px;
}
.el_card_item h4{
  margin-bottom: 10px;
  /* line-height: 20px; */
  display: flex;
  align-items: center;
}
.el_card_item .item_label{
  width: 80px;
  /* text-align: right; */
}
.dialog.el-dialog__wrapper{
    overflow: hidden!important;
}
.CeremonyHall /deep/ .el-dialog .el-dialog__body{
    height: 500px;
    overflow-y: scroll;
}
</style>
